<template>
    <div>
        <div class="row">
            <div class="col-md-3 text-right mb-3">所在城市</div>
            <div class="col-md-9">
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <select v-model="region.province" class="form-control">
                            <option :key="key" v-for="(province, key) in data">{{province.name}}</option>
                        </select>
                    </div>
                    <div class="col-md-4 mb-3">
                        <select v-model="region.city" class="form-control">
                            <option :key="key" v-for="(city, key) in cities">{{city.name}}</option>
                        </select>
                    </div>
                    <div class="col-md-4 mb-3">
                        <select v-model="region.area" class="form-control">
                            <option :key="key" v-for="(area, key) in areas">{{area}}</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import data from '@/assets/json/city.json'

export default {
  name: 'XsgRegion',
  data () {
    return {
      data: data,
      region: {
        province: '上海市',
        city: '上海市',
        area: '松江区'
      }
    }
  },
  computed: {
    cities () {
      var provinceName = this.region.province
      return this.data.filter(function (provinceOpj) {
        return provinceOpj.name === provinceName
      })[0].city
    },
    areas () {
      var cityName = this.region.city
      return this.cities.filter(function (cityObj) {
        return cityObj.name === cityName
      })[0].area
    }
  },
  watch: {
    'region.province': function () {
      this.region.city = this.cities[0].name
    },
    'region.city': function () {
      this.region.area = this.areas[0]
    },
    region: {
      handler (region) {
        this.$emit('update', region)
      },
      deep: true
    }
  }
}
</script>

<style scoped>
    .label {
        line-height: 38px;
    }
</style>
